<!-- 雷达图 -->
<template>
  <div :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "250px",
    },
    data: {
      type: Object,
      default() {
        return {
          indicator: [
            { name: "服务态度", max: 6500 },
            { name: "办事时间", max: 16000 },
            { name: "跑动次数", max: 30000 },
            { name: "缴费方式", max: 38000 },
            { name: "及时性", max: 10 },
          ],
          seriesData: [
            {
                name: "2020评分",
                areaColor: "rgba(109,175,255, 0.3)",
                itemColor: {
                color: "#6dafff",
                borderColor: "#6dafff",
                },
                lineClor: "#6dafff",
                value: [4600, 13000, 25000, 23500, 8],
            },
            {
                name: "2021评分",
                areaColor: "rgba(253,126,142, 0.3)",
                itemColor: {
                color: "#fd7e8e",
                borderColor: "#fd7e8e",
                },
                lineClor: "#fd7e8e",
                value: [5600, 6000, 13000, 10500, 9],
            },
          ]
        }
      },
    },
  },
  data() {
    return {
      chart: {},
      seriesData: [],
    };
  },
  mounted() {
    for (let i = 0; i < this.data.seriesData.length; i++) {
      this.seriesData.push({
        name: this.data.seriesData[i].name,
        areaStyle: { color: this.data.seriesData[i].areaColor },
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          color: this.data.seriesData[i].itemColor.color,
          borderColor: this.data.seriesData[i].itemColor.borderColor,
          borderWidth: 2,
        },
        lineStyle: { color: this.data.seriesData[i].lineColor, width: 2 },
        label: { show: false },
        value: this.data.seriesData[i].value,
      });
    }

    this.initEchart(this.data);
    setTimeout(() => {
			this.initChart()
		}, 20)
  },
  methods: {
    initEchart(data) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$el);
      let option = {
        tooltip: {},
        legend: {
          icon: 'rect',
          itemGap: 13,
          left: 'right',
          top: 'top',
          itemWidth: 20,
          itemHeight: 12,
          textStyle: {
            color: "#333", //设置文字颜色
            fontSize: 14,
          },
        },
        radar: {
          radius: "80%",
          center: ["50%", "52%"],
          startAngle: 90,
          triggerEvent: true,
          name: {
            textStyle: {
              color: "#333",
              fontSize: "15",
              borderRadius: 3,
              padding: [5, 5],
            },
          },
          nameGap: "2",
          indicator: data.indicator,
          splitArea: {
            areaStyle: {
              color: [
                "#f5fdff",
                "#f5fdff",
                "#f5fdff",
                "#f5fdff",
                "#f5fdff",
                "#f5fdff",
              ].reverse(),
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
            },
          },
          axisLine: { lineStyle: { color: "rgba(0,206,209, 0.3)" } },
          splitLine: {
            lineStyle: {
              width: 1,
              color: [
                "#d6e5f3",
                "#d6e5f3",
                "#d6e5f3",
                "#d6e5f3",
                "#d6e5f3",
                "#d6e5f3",
              ].reverse(),
            },
          },
        },
        series: {
          name: '雷达图',
          type: 'radar',
          data: this.seriesData
        }
      };
      this.chart.setOption(option);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>